<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/index.css">

    <title>Document</title>
   
</head>

<body>
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../tools/jquery-pagination/jquery.pagination.js"></script>

    <!-- 顶部 -->
    <div class="nav-w">
        <div class="w1200 nav">
            <div class="heater-nav-content">
                <a href="">
                    <i></i>
                    首页
                </a>
                <a href="">
                    <i></i>
                    商城
                </a>
                <a href="">
                    我的订单
                </a>
                <a href="">

                    关于我们
                    <i class="icon-deltail"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- 头部-->
    <div class="head">
        <header class="w1200">
            <img src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt="">
            <div class="header-ca">
                <i></i>
                目录
            </div>
            <div class="right">
                <div>
                    <!-- 搜索栏 -->
                    <div class="search bar1">
                        <form>
                            <input type="text" placeholder="请输入您要搜索的内容...">
                            <button type="submit"></button>
                        </form>
                    </div>
                    <!-- 导航栏 -->
                    <div class="r-nav">
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_626h76eek6jgl5621492ck0438af3_48x44.png"
                                alt="">
                            <figcaption>消息</figcaption>
                        </figure>
                        <figure>
                            <img src="	https://s10.mogucdn.com/mlcdn/c45406/181016_1e18fbc53dab5f8f6c45h6e57954d_44x44.png"
                                alt="">
                            <figcaption>收藏</figcaption>
                        </figure>
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_22cba5f6a88gdl2gf42i14hj7flk8_48x46.png"
                                alt="">
                            <figcaption> <a href="">购物车</a> </figcaption>
                        </figure>
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181205_2f1dbgdfffde6147cfl3e09864lge_40x40.png"
                                alt="">
                            <figcaption>二维码</figcaption>
                        </figure>
                    </div>
                    <!-- 登录 -->
                    <div class="login">

                        <img src="	https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png"
                            alt="">
                        <a href="./login.html"> 登录
                        </a>
                    </div>
                </div>

            </div>
        </header>
    </div>


    <!-- 导航栏 -->
    <nav class="w1200 nav1">

        <div class="sp_top_nav">
            <ul class="nav_list">
                <li> <a href="./list.html?cat_one_id=食品酒水">连衣裙</a> </li>
                <li> <a href="./list.html?cat_one_id=童装玩具">裤子</a> </li>
                <li> <a href="./list.html?cat_one_id=家装建材">包包</a> </li>
                <li> <a href="">上衣</a> </li>
            </ul>
        </div>

    </nav>

    <!-- 内容 -->
    <div class="goods-l w1200 container1">

    </div>

    <!-- 底部 -->
    <div class="bot">
        <!-- 维修服务模块 -->
        <div class="server w1200">
            <img src="https://s10.mogucdn.com/mlcdn/c45406/181112_4a8ch8fac2i12ib313hif4da35ed3_280x76.png" alt="">
        </div>
        <!-- 尾部列表模块 -->
        <div class="footerlist w1200">
            <div class="footerleft">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>关于小米</dt>
                    <dd><a href="#">了解小米</a></dd>
                    <dd><a href="#">加入小米</a></dd>
                    <dd><a href="#">投资者关系</a></dd>
                    <dd><a href="#">企业社会责任</a></dd>
                    <dd><a href="#">廉洁举报</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
            </div>
            <div class="footerright">
                <mark>400-100-5678</mark>
                <p>8:00-18:00（仅收市话费）</p>
                <div><span class="iconfont icon-shouji"></span> 人工客服</div>
                <p>
                    关注小米
                    <span class="iconfont icon-gouwucheman"></span>
                    <span class="iconfont icon-fangdajing1"></span>
                </p>
            </div>
        </div>
        <!--  -->
        <footer>
            <div class="w1200">

                <div>
                    <p>
                        <a href="#">商城</a>|
                        <a href="#">MIU</a>|
                        <a href="#">米家</a>|
                        <a href="#">米聊</a>|
                        <a href="#">多看</a>|
                        <a href="#">游戏</a>|
                        <a href="#">政企服务</a>|
                        <a href="#">天猫店</a>|
                        <a href="#">集团隐私政策</a>|
                        <a href="#">公司儿童信息保护规则</a>|
                        <a href="#">商城隐私政策</a>|
                        <a href="#">商城用户协议</a>|
                        <a href="#">问题反馈</a>|
                        <a href="#"> Select Location</a>
                    </p>
                    <p>
                        <a href="#">北京互联网法院法律服务工作站</a>|
                        <a href="#">中国消费者协会</a>|
                        <a href="#">北京市消费者协会</a>
                    </p>
                    <span>
                        © <mi.com href="#">mi.com</a> 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号
                            京网文[2020]0276-042号
                    </span>
                    <span>
                        <a href="">（京）网械平台备字（2018）</a>第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告
                    </span>
                    <span>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</span>
                    <span>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
                </div>
            </div>

        </footer>
    </div>
    
    <script>
        getPage();


        async function getPage() {

            const urlObj = myGetUrlVal();
            //  2,  发送请求
            const res = await myPromiseAjax('../server/goods_list.php', 'get', { cat_one_id: urlObj.cat_one_id, page: 1, line: 8 }, 'json');
            // res.data 存储 8条数据信息
            console.log(res);

            //  3,  动态生成页面
            let str = '';
            // item就是存储数据的对象
            res.data.forEach(item => {
                str += `
        <div>
            <a href="./detail.html?goods_id=${item.goods_id}" class="goods-tu">
                <img src="${item.goods_big_logo}" alt="">
            </a>
            <a href="./detail.html?goods_id=${item.goods_id}">
                <p>${item.goods_name}</p>
                <div>
                    <b>${item.goods_price}</b>
                    <span>
                        <img src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
                            alt="">
                        1218
                    </span>
                </div>
            </a>
        </div>
        
        `;
            })
            // 将结果写入标签中
            $('.container1').html(str);

            //  4,  获取分页div标签 设定页面器
            $('.box').pagination({
                pageCount: res.sumPage,
                totalData: res.row,
                current: res.page,
                showData: res.line,
                prevCls: 'prev',
                nextCls: 'next',
                prevContent: '上一页',
                nextContent: '下一页',
                activeCls: 'active',
                count: 4,
                mode: 'fixed',
                coping: 'true',
                homePage: '首页',
                endPage: '末页',
                jump: true,
                callback: function (res) {
                    // 点击之后执行的回调函数
                    console.log(res);
                    // 获取当前点击 按钮 表示的页数
                    console.log(res.getCurrent());
                    // 将页数 设定为 page变量
                    page = res.getCurrent();

                    // 根据新的页数数据 可以 再次发起请求 动态生成新的页面
                    getPage();
                }
            })

        }
    </script>




</body>

</html>